<template>
  <div>
    <Dialog
      v-model:dialogFormVisible="dialogFormVisible"
      :top="top"
      :info="info"
      @updateList="getMemberList"
    ></Dialog>
  </div>
  <el-card>
    <template #header>
      <div class="topBar">
        <div>欢迎回来</div>
        <p>当前用户：{{ userStore.userInfo.name }}</p>
        <el-popconfirm title="确定退出吗" @confirm="logout">
    <template #reference>
        <el-button link type="primary">退出</el-button>
    </template>
  </el-popconfirm>

      </div>
    </template>
  </el-card>
  <el-card>
    <template #header>
      <div class="top">
        <div>成员列表</div>
        <el-button type="primary" @click="open('新增', {})">新增</el-button>
      </div>
    </template>
    <el-table :data="tableData">
      <el-table-column type="index" width="50" />
      <el-table-column property="username" label="学号" />
      <el-table-column property="name" label="姓名" />
      <el-table-column property="member" label="团队" />
      <el-table-column fixed="right" label="操作">
        <template #default="scope">
          <el-button link type="primary" @click="open('编辑', scope.row)"
            >编辑</el-button
          >
          <el-popconfirm title="确定删除吗" @confirm="delMember(scope.row.username)">
            <template #reference>
              <el-button
                link
                type="primary"
                >删除</el-button
              >
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script setup>
import { useUserStore } from "@/stores/user";
const userStore = useUserStore();

import { useRouter } from "vue-router";
const router = useRouter();
import Dialog from "@/views/dialog.vue";
import { ref, onMounted } from "vue";
import { getMemberListApi, delMemberApi } from "@/api/home";
const top = ref("新增");
const info = ref({});
const tableData = ref([
  {
    name: "222",
    username: "222",
    member: "222",
  },
]);
const dialogFormVisible = ref(false);
const open = (val, data) => {
  dialogFormVisible.value = true;
  top.value = val;
  console.log(data);
  info.value = data;
};
const getMemberList = async () => {
  const res = await getMemberListApi();
  tableData.value = res.data;
};
const delMember = async (id) => {
  const res = await delMemberApi({ id });
  console.log(res.code);
  if (res.code === 200) {
    getMemberList();
  }
};
onMounted(() => {
  getMemberList();
});

const logout = () => {
  userStore.logout();
  router.push("/login");
};
</script>

<style scoped>
.top {
  display: flex;
  justify-content: space-between;
  margin: 0 20px;
}
.topBar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 20px;
}
</style>
